<template>
  <div class="moments-stats">
    <div class="stats-header">
      <el-button @click="goBack" text>
        <el-icon><ArrowLeft /></el-icon>
        返回
      </el-button>
      <h1 class="title">心情统计</h1>
      <div></div>
    </div>

    <div class="stats-content" v-loading="loading">
      <div class="stats-cards">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <span>心情分布</span>
              <el-icon><PieChart /></el-icon>
            </div>
          </template>
          <div class="mood-stats">
            <div 
              v-for="stat in moodStats" 
              :key="stat.mood"
              class="mood-item"
            >
              <div class="mood-info">
                <span class="mood-emoji">{{ getMoodEmoji(stat.mood) }}</span>
                <span class="mood-name">{{ getMoodName(stat.mood) }}</span>
              </div>
              <div class="mood-data">
                <span class="mood-count">{{ stat.count }}</span>
                <div class="mood-bar">
                  <div 
                    class="mood-progress"
                    :style="{ width: stat.percentage + '%' }"
                  ></div>
                </div>
                <span class="mood-percentage">{{ stat.percentage.toFixed(1) }}%</span>
              </div>
            </div>
          </div>
        </el-card>

        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <span>热门标签</span>
              <el-icon><Collection /></el-icon>
            </div>
          </template>
          <div class="tag-stats">
            <el-tag
              v-for="stat in tagStats.slice(0, 20)"
              :key="stat.tag"
              :size="getTagSize(stat.count)"
              effect="plain"
              class="tag-item"
              @click="searchByTag(stat.tag)"
            >
              #{{ stat.tag }} ({{ stat.count }})
            </el-tag>
            <div v-if="tagStats.length === 0" class="empty-state">
              暂无标签数据
            </div>
          </div>
        </el-card>

        <el-card class="stat-card overview-card">
          <template #header>
            <div class="card-header">
              <span>总览</span>
              <el-icon><DataAnalysis /></el-icon>
            </div>
          </template>
          <div class="overview-stats">
            <div class="overview-item">
              <div class="overview-number">{{ totalMoments }}</div>
              <div class="overview-label">总动态</div>
            </div>
            <div class="overview-item">
              <div class="overview-number">{{ totalTags }}</div>
              <div class="overview-label">使用标签</div>
            </div>
            <div class="overview-item">
              <div class="overview-number">{{ daysActive }}</div>
              <div class="overview-label">活跃天数</div>
            </div>
            <div class="overview-item">
              <div class="overview-number">{{ avgPerDay }}</div>
              <div class="overview-label">日均动态</div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowLeft, PieChart, Collection, DataAnalysis } from '@element-plus/icons-vue'
import { useMomentStats } from '../composables/useMoments'
import { MoodType } from '../types'

const router = useRouter()
const { 
  loading, 
  moodStats, 
  tagStats, 
  fetchMoodStats, 
  fetchTagStats 
} = useMomentStats()

// 心情表情映射
const moodEmojiMap = {
  [MoodType.HAPPY]: '😊',
  [MoodType.SAD]: '😢',
  [MoodType.EXCITED]: '🎉',
  [MoodType.PEACEFUL]: '😌',
  [MoodType.ANXIOUS]: '😰',
  [MoodType.GRATEFUL]: '🙏',
  [MoodType.THOUGHTFUL]: '🤔',
  [MoodType.NOSTALGIC]: '😌'
}

// 心情名称映射
const moodNameMap = {
  [MoodType.HAPPY]: '开心',
  [MoodType.SAD]: '难过',
  [MoodType.EXCITED]: '兴奋',
  [MoodType.PEACEFUL]: '平静',
  [MoodType.ANXIOUS]: '焦虑',
  [MoodType.GRATEFUL]: '感恩',
  [MoodType.THOUGHTFUL]: '沉思',
  [MoodType.NOSTALGIC]: '怀念'
}

// 计算统计数据
const totalMoments = computed(() => {
  return moodStats.value.reduce((sum, stat) => sum + stat.count, 0)
})

const totalTags = computed(() => {
  return tagStats.value.length
})

const daysActive = computed(() => {
  // 这里应该从后端获取实际的活跃天数
  // 暂时使用标签数量作为估算
  return Math.min(totalTags.value * 2, 365)
})

const avgPerDay = computed(() => {
  if (daysActive.value === 0) return '0.0'
  return (totalMoments.value / daysActive.value).toFixed(1)
})

// 获取心情表情
const getMoodEmoji = (mood: MoodType) => {
  return moodEmojiMap[mood] || '😐'
}

// 获取心情名称
const getMoodName = (mood: MoodType) => {
  return moodNameMap[mood] || mood
}

// 根据标签使用次数确定标签大小
const getTagSize = (count: number) => {
  if (count >= 10) return 'large'
  if (count >= 5) return 'default'
  return 'small'
}

// 按标签搜索
const searchByTag = (tag: string) => {
  router.push({
    path: '/moments',
    query: { tag }
  })
}

// 返回
const goBack = () => {
  router.back()
}

onMounted(() => {
  fetchMoodStats()
  fetchTagStats()
})
</script>

<style scoped>
.moments-stats {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--el-bg-color-page);
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color-light);
}

.title {
  margin: 0;
  font-size: 20px;
  color: var(--el-text-color-primary);
}

.stats-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.stat-card {
  border-radius: 12px;
}

.overview-card {
  grid-column: 1 / -1;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
}

.mood-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mood-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mood-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.mood-emoji {
  font-size: 18px;
}

.mood-data {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  max-width: 200px;
}

.mood-count {
  font-weight: 500;
  min-width: 30px;
  text-align: right;
}

.mood-bar {
  flex: 1;
  height: 6px;
  background: var(--el-fill-color-light);
  border-radius: 3px;
  overflow: hidden;
}

.mood-progress {
  height: 100%;
  background: var(--el-color-primary);
  transition: width 0.3s ease;
}

.mood-percentage {
  font-size: 12px;
  color: var(--el-text-color-regular);
  min-width: 40px;
  text-align: right;
}

.tag-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-item {
  cursor: pointer;
  transition: all 0.2s ease;
}

.tag-item:hover {
  transform: scale(1.05);
}

.empty-state {
  color: var(--el-text-color-placeholder);
  text-align: center;
  padding: 20px;
}

.overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
}

.overview-item {
  text-align: center;
  padding: 16px;
  background: var(--el-fill-color-lighter);
  border-radius: 8px;
}

.overview-number {
  font-size: 24px;
  font-weight: bold;
  color: var(--el-color-primary);
  margin-bottom: 4px;
}

.overview-label {
  font-size: 12px;
  color: var(--el-text-color-regular);
}
</style>